<template>
	<view class="content">

		<scroll-view scroll-x>
			<view class="baby">
				<view :class="index==Xindex?'babyItem activeBaby':'babyItem'" v-for="(item ,index) in babyList"
					@click="activeBaby(index)">
					<image :src="item.pic" mode=""></image>
					<view class="name">
						{{item.user}}
					</view>
				</view>

				<u-empty v-if="!babyList.length" text="暂未添加宝贝" mode="list" style="margin: 0 auto;"></u-empty>
			</view>
		</scroll-view>

		<view class="card">
			<textarea auto-height placeholder="发布内容,字数最多200字" v-model="content" />
			<block v-if="forums_status==1">
				<view class="_video" v-if="videoUrl">
					<u-icon name="close-circle"
						style="position: absolute;top: -40upx;right: -40upx;z-index: 999999;padding: 20upx;"
						color=" rgb(254, 28, 77)" size="40" @click="escVideo"></u-icon>
					<video :src="videoUrl" controls style="width: 100%;"></video>
				</view>

				<view v-else class="masking" @click="uploadVideo">
					<!-- <image src="../../../../static/video.png" mode=""></image> -->
					<view class="">
						添加视频
					</view>
					<u-icon name="plus" size="60"></u-icon>
				</view>
			</block>


			<u-upload :action="action" :file-list="fileList" ref="pic_set" @on-change="upImg" @on-remove="escImg">
			</u-upload>
		</view>


		<view class="btn" @click="submit()">
			发布
		</view>
		<Loading />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 'https://ilexue.top/home/upload/upload',
				forums_status: uni.getStorageSync('basic').forums_status,
				fileList: [],
				content: '',
				pic_set: [],
				babyList: [],
				Xindex: -1,
				videoUrl: '',
				video: '',
				videoImg: '',
				city: '',
				often:false
			}
		},
		onLoad() {
			this.newData()
			let that = this
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					that.loadCity(res.longitude, res.latitude)
				},
				fail: function(err) {
					wx.getSetting({
						success: function(res) {
							var statu = res.authSetting;
							console.log(res)
							if (!statu['scope.userLocation']) {
								wx.showModal({
									title: '是否授权当前位置',
									content: '需要获取您的地理位置，请确认授权，否则无法发布家校圈',
									success(tip) {
										if (tip.confirm) {
											wx.openSetting({
												success: function(data) {
													if (data.authSetting[
															"scope.userLocation"
														] === true) {
														wx.showToast({
															title: '授权成功',
															icon: 'success',
															duration: 1000
														})
														uni.getLocation({
															type: 'wgs84',
															success: function(
																res
															) {
																that.loadCity(
																	res
																	.longitude,
																	res
																	.latitude
																)

															},
															fail: function(
																err
															) {
																uni.showModal({
																	title: '提示',
																	content: '请打开手机定位',
																	showCancel: false,
																	success: function(
																		res
																	) {
																		if (res
																			.confirm
																		) {
																			uni.navigateBack({
																				delta: 1
																			});
																		} else if (
																			res
																			.cancel
																		) {
																			uni.navigateBack({
																				delta: 1
																			});
																		}
																	}
																});
															}
														});
													}
												}
											})
										} else {
											wx.showToast({
												title: '授权失败',
												icon: 'none',
												duration: 1000
											})
											uni.navigateBack({
												delta: 1
											});
										}
									}
								})
							} else {
								uni.showModal({
									title: '提示',
									content: '请打开手机定位',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											uni.navigateBack({
												delta: 1
											});
										} else if (res.cancel) {
											uni.navigateBack({
												delta: 1
											});
										}
									}
								});
							}
						}
					})
				}
			})
		},
		methods: {
			newData() {
				this.$myRuquest('home/user/baby_list').then(res => {
					if (res.code == 400) {
						this.babyList = res.data
					}
				})
			},
			escVideo() {
				this.videoImg = ''
				this.video = ''
				this.videoUrl = ''
			},
			uploadVideo() {
				let that = this
				uni.chooseMedia({
					count: 1,
					maxDuration: 60,
					mediaType: ['video'],
					sourceType: ['camera', 'album'],
					success(res) {
						console.log(res)
						uni.showLoading({
							title: '上传中'
						});
						that.$uploadImage(res.tempFiles[0].thumbTempFilePath, (res) => {
							if (res.code == 400) {
								that.videoImg = res.data
							}
						})
						that.$uploadFiles({
							filePath: res.tempFiles[0].tempFilePath,
							formData: {
								method: 'upload.docx'
							}
						}).then(ress => {
							console.log('测试',ress.data)
							let data = JSON.parse(ress.data)
							if (data.code == 400) {
								that.video = data.data
								that.videoUrl = res.tempFiles[0].tempFilePath
							} else {
								that.$refs.uToast.show({
									title: '失败',
									type: 'error '
								})
							}
						})
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			loadCity(lng, lat) {
				var that = this
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/regeo',
					data: {
						key: 'cfb3c2d54458e7f0180cdd53278dd44c',
						location: lng + "," + lat,
						extensions: "all",
						s: "rsx",
						sdkversion: "sdkversion",
						logversion: "logversion"
					},
					success: function(res) {
						that.city = res.data.regeocode.addressComponent.city
						// that.formatted_address = res.data.regeocode.formatted_address.split(that.city)[1];
					},
					fail: function(res) {
						console.log('获取地理位置失败')

					}
				})
			},
			activeBaby(index) {
				if (this.Xindex == index) return this.Xindex = -1;
				this.Xindex = index
			},
			upImg(e) {
				let res = JSON.parse(e.data)
				if (res.code == 400) {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success'
					})
					this.pic_set.push(res.data)
				} else {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'error'
					})
				}
			},
			escImg(e) {
				this.pic_set.splice(e, 1)
			},
			submit() {
				if(this.often) return;
				if (!this.content) return this.examine('请输入发布内容')
				this.often=true
				let data = {
					video: this.video,
					video_pic: this.videoImg,
					content: this.content,
					pic_set: JSON.stringify(this.pic_set),
					add: this.city
				}
				if (this.Xindex != -1) data.baby_id = this.babyList[this.Xindex].id
				this.$myRuquest('home/Forums/forums_save', data, 'POST').then(res => {
					if (res.code == 400) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
							url: '/pages/community/community?code=true',
							isTab: true
						})
					}else{
						this.examine(res.msg||'内容暂不支持表情')
						this.often=false
					}
				})
			},
			examine(msg) {
				this.$refs.uToast.show({
					title: msg,
					type: 'error'
				})
			}
		}
	}
</script>

<style lang="less">
	.content {
		background-color: rgb(247, 247, 247);
		padding: 20upx;
	}

	._video {
		width: calc(100vw - 80upx);
		margin: 20upx 0;
		position: relative;
	}

	.masking {
		width: calc(100vw - 80upx);
		height: 410upx;
		line-height: 300upx;
		text-align: center;
		margin: 20upx 0;
		border-radius: 12upx;
		background-color: #F1F1F1;

		view {
			width: 100%;
			height: 40upx;
			line-height: 460upx;
		}
	}

	.card {
		background-color: #fff;
		border-radius: 12upx;
		padding: 20upx;
	}

	scroll-view {
		background-color: #fff;
		padding: 20upx 10upx;

		border-radius: 12upx;
		margin-bottom: 20upx;
		width: calc(100vw - 60upx);
	}

	.baby {
		display: flex;
		// flex-wrap: wrap;
		padding: 10upx 15upx;

		.babyItem {
			width: 120upx;
			padding: 10upx 0;
			position: relative;
			transition: all .3s;
			margin-right: 10upx;
			border-radius: 12upx;

			image {
				display: block;
				width: 100upx;
				height: 100upx;
				margin: 0 auto;
				border-radius: 8upx;
			}

			.name {
				font-size: 24upx;
				text-align: center;
			}

			.esc {
				position: absolute;
				top: -20upx;
				right: -20upx;
			}
		}
	}

	textarea {
		width: calc(100% - 40upx);
		min-height: 400upx;
		background-color: rgb(247, 247, 247);
		border-radius: 12upx;
		padding: 20upx;
	}

	.btn {
		width: 500upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		margin: 100upx auto;
		border-radius: 12upx;
		background: linear-gradient(to right, rgb(254, 189, 140), rgb(254, 28, 77));
		color: #fff;
	}

	.slot-btn {
		width: 400upx;
	}

	.activeBaby {
		background-color: rgb(247, 247, 247);
		transform: scale(1.1);
	}
</style>
